<!--
 * @Author: windys
 * @Description: 
 * @Date: 2022-02-15 11:08:32
-->
<template>
  <div class="invite_page">
    <!-- <van-nav-bar
      title="邀请"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    /> -->
    <div class="text">
      <p>
        邀请好友加入财乎<br />
        好友开通会员领 {{ num }}元
      </p>
    </div>
    <div id="qrcode" class="code" v-if="show"></div>
    <van-button
      type="primary"
      color="linear-gradient(to right, rgb(245 199 82), rgb(243 209 125))"
      round
      block
      style="width: 300px; margin: 0 auto"
      @click="handleCopy(link)"
      >立即邀请</van-button
    >
  </div>
</template>


<script >
import { defineComponent, onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { getSendMoeny } from "@/api/common";
import storage from "@/utils/storage";
import { Toast } from "vant";
export default defineComponent({
  setup() {
    const user = ref(JSON.parse(storage.getStorage("v3_userinfo_mobile")));
    const show = ref(false);
    const router = useRouter();
    const onClickLeft = () => {
      router.push("/my");
    };
    const num = ref(null);
    const link = ref(
      `http://www.caihuapp.com/h5/#/register?userId=${user.value.shortId}`
    );
    onMounted(async () => {
      const res = await getSendMoeny({});
      if (typeof res === "object") {
        num.value = res.money;
      }
      show.value = true;

      setTimeout(() => {
        new QRCode("qrcode", {
          text: `http://www.caihuapp.com/h5/#/register?userId=${user.value.shortId}`,
          width: 150,
          height: 150,
          colorDark: "#000000",
          colorLight: "#ffffff",
          correctLevel: QRCode.CorrectLevel.H,
        });
      }, 100);
    });

    const handleCopy = (node) => {
      if (!node) {
        return;
      }
      var result;
      // 将复制内容添加到临时textarea元素中
      var tempTextarea = document.createElement("textarea");
      document.body.appendChild(tempTextarea);
      if (typeof node == "object") {
        // 复制节点中内容
        // 是否表单
        if (node.value) {
          tempTextarea.value = node.value;
        } else {
          tempTextarea.value = node.innerHTML;
        }
      } else {
        // 直接复制文本
        tempTextarea.value = node;
      }
      // 判断设备
      var u = navigator.userAgent;
      if (u.match(/(iPhone|iPod|iPad);?/i)) {
        // iOS
        // 移除已选择的元素
        window.getSelection().removeAllRanges();
        // 创建一个Range对象
        var range = document.createRange();
        // 选中
        range.selectNode(tempTextarea);
        // 执行选中元素
        window.getSelection().addRange(range);
        // 复制
        result = document.execCommand("copy");
        // 移除选中元素
        window.getSelection().removeAllRanges();
      } else {
        // 选中
        tempTextarea.select();
        // 复制
        result = document.execCommand("Copy");
      }
      // 移除临时文本域
      document.body.removeChild(tempTextarea);
      if (result) {
        Toast.success("复制成功");
      } else {
        Toast.fail("复制失败");
      }
      return result;
    };
    return {
      show,
      link,
      num,
      onClickLeft,
      handleCopy,
    };
  },
});
</script>



<style lang="scss" scoped>
.invite_page {
  position: absolute;
  height: 100%;
  width: 100%;
  background: url("@/assets/img/ic_invitation_page@2x.png");
  background-size: 70%;
  background-position: 55px 0px;
  background-repeat: no-repeat;
}
.text {
  margin: 0 auto;
  margin-top: 80%;
  margin-bottom: 20px;
  text-align: center;
  color: hsl(14, 80%, 50%);
  p {
    line-height: 20px;
    font-size: 16px;
  }
}
.code {
  width: 150px;
  height: 150px;
  margin: 0 auto;
  margin-top: 25px;
  margin-bottom: 20px;
  border-radius: 5px;
}
</style>



